<template>
  <a-modal :title="title" :width="width" :visible="visible" @cancel="handleCancel" :footer="null">
    <a-spin :spinning="confirmLoading">
      <div class="antd-modal-form">
<!--        <a-steps :current="current">
          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
        </a-steps>-->
        <div v-if="current==0">
          <div class="steps-content-desp" style="padding: 10px;">
            查询时间段：
            <a-date-picker value-format="YYYY-MM-DD" placeholder="请选择开始时间"
                           v-model:value="queryParam.beginTime" class="query-group-cust" />
            <span class="query-group-split-cust"> ~ </span>
            <a-date-picker value-format="YYYY-MM-DD" placeholder="请选择结束时间"
                           v-model:value="queryParam.endTime" class="query-group-cust" />
            （只能查询最近一年内的记录）
          </div>
          <!--引用表格-->
          <BasicTable @register="registerTable">
            <!--插槽:table标题-->
            <template #tableTitle>
              <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询未导入库的充值记录</a-button>
            </template>
            <!--操作栏-->
            <template #action="{ record }">
              <TableAction :actions="getTableAction(record)" />
            </template>
            <!--交易方向插槽-->
            <template #trxdirSlot="{record}">
              <a-tag v-if="record.trxdir==='C'" color="green">贷方（收入）</a-tag>
              <a-tag v-if="record.trxdir==='D'" color="red">借方（支出）</a-tag>
            </template>
            <!--记账方式插槽-->
            <template #autflgSlot="{record}">
              <a-badge v-if="record.autflg==='1'" color="blue" text="自动" />
              <a-badge v-if="record.autflg==='2'" color="cyan" text="手工" />
              <a-badge v-if="record.autflg==='3'" color="green" text="内部转账" />
              <a-badge v-if="record.autflg==='4'" color="red" text="关联公司卡" />
              <a-badge v-if="record.autflg==='5'" color="grey" text="付方白名单" />
            </template>
          </BasicTable>
        </div>
        <div v-if="current==1">

        </div>
        <div class="steps-action">
          <a-button v-if="current == 0" @click="prev">取消</a-button>
          <a-button v-if="current == 0" style="margin-left: 10px" type="primary" @click="next" :disabled="nextDisabled">提交保存</a-button>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script lang="ts" setup>
import { defineExpose, reactive, ref } from "vue";
import { useMessage } from "/@/hooks/web/useMessage";
import { BasicTable, TableAction } from "/@/components/Table";
import { useListPage } from "/@/hooks/system/useListPage";
import {queryFilterRechargeRecords , handleRechargeSave} from "../CaishuiServiceCompany.api";
import { transactionFlowColumns } from "../CaishuiServiceCompany.data";

const title = ref<string>('');
const width = ref<number>(1300);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const emit = defineEmits(['register', 'success']);
const confirmLoading = ref<boolean>(false);
const { createMessage, createConfirm } = useMessage();
const current = ref<number>(0);
const nextDisabled = ref<boolean>(true);
const queryParam = ref<any>({});
const formData = reactive<Record<string, any>>({
  bankCard: '',
  rechargeList: [],
});
const steps = ref<any>([
  {
    title: '查询',
    content: '',
  },
  {
    title: '完成',
    content: '',
  },
]);
const filterRechargeRecords = ref<any[]>([]);
//注册table数据
const { prefixCls, tableContext } = useListPage({
  tableProps: {
    title: '刷选列表',
    dataSource: filterRechargeRecords,
    columns: transactionFlowColumns,
    canResize:false,
    useSearchForm: false,
    striped: true,
    showIndexColumn: true,
    showActionColumn: true,
    pagination: false,
    actionColumn: {
      width: 120,
      fixed: 'right',
    },
  },
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;

const next = async () => {
  if (filterRechargeRecords.value.length <= 0) {
    createMessage.warning("暂无数据");
    return;
  } else {
    formData.rechargeList = filterRechargeRecords.value;
  }
  //数据格式化
  let model = formData;
  console.log("---提交数据--：",model)
  if(current.value==0){
    createConfirm({
      iconType: 'warning',
      title: '确认提交',
      content: '请仔细检查数据，确认无误后提交表格数据？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        confirmLoading.value = true;
        //提交数据
        handleRechargeSave(model).then((res) => {
          if (res.success) {
            createMessage.success(res.message);
            emit('success');
            visible.value = false;
          } else {
            createMessage.warning(res.message);
          }
        }).finally(() => {
          confirmLoading.value = false;
        });
      }
    });
  }
};
const prev = () => {
  visible.value = false;
};

/**
 * 查询
 */
function searchQuery() {
  if (!formData.bankCard) {
    createMessage.warning("服务公司账号为空");
    return;
  }
  if (!queryParam.value.beginTime) {
    createMessage.warning("开始时间不能为空");
    return;
  }
  if (!queryParam.value.endTime) {
    createMessage.warning("结束时间不能为空");
    return;
  }

  //查询服务公司未入库的充值记录
  confirmLoading.value = true;
  queryFilterRechargeRecords({
    bankCard: formData.bankCard,
    beginTime: queryParam.value.beginTime,
    endTime: queryParam.value.endTime,
  }).then((res) => {
    if (res.success) {
      filterRechargeRecords.value = res.result;
    }else {
      createMessage.warning(res.message);
    }
    if (filterRechargeRecords.value.length > 0) {
      nextDisabled.value = false;
    }else {
      nextDisabled.value = true;
    }
  }).finally(() => {
    confirmLoading.value = false;
  });
}

/**
 * 新增
 */
async function show(bankCard) {
  title.value = '充值记录刷选';
  visible.value = true;
  current.value = 0;
  nextDisabled.value = true;
  filterRechargeRecords.value = [];
  formData.rechargeList = [];
  formData.bankCard = bankCard;
}

/**
 * 操作栏
 */
function getTableAction(record) {
  return [
    {
      label: '移除',
      icon: 'ant-design:delete-outlined',
      popConfirm: {
        title: '是否确认移除？',
        confirm: handleDelete.bind(null, record),
      }
    }
  ];
}

/**
 * 移除
 */
function handleDelete(record) {
  filterRechargeRecords.value = filterRechargeRecords.value.filter(item => item.id !== record.id);
  if (filterRechargeRecords.value.length > 0) {
    nextDisabled.value = false;
  }else {
    nextDisabled.value = true;
  }
}

/**
 * 取消按钮回调事件
 */
function handleCancel() {
  visible.value = false;
}

defineExpose({
  show,
  disableSubmit,
});
</script>

<style lang="less" scoped>
/**隐藏样式-modal确定按钮 */
.jee-hidden {
  display: none !important;
}

.antd-modal-form {
  overflow-y: auto;
  padding: 24px 24px 24px 24px;
}

.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 240px;
}

.ss-checkbox{
  border: 1px solid #eae8e8;
  border-radius: 5px;
  width: 90%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  margin-top: 10px;
}
.steps-action {
  margin-top: 24px;
  float: right;
}

[data-theme='dark'] .steps-content {
  background-color: #2f2f2f;
  border: 1px dashed #404040;
}
.image-tip-cla{
  margin-left: 70px;
  margin-top: 5px;
}

.steps-content-desp {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
}
</style>
